<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type='text/javascript' src='../vue.js'></script>
    <style>
        .myh1 {color:red;text-align:center;}
        .myh2 {color:yellow;text-align:center;}

        .arr1 {border-radius: 10px;}
        .arr2 { border: 4px solid red; border-color: black;}
        .arr3 {background-color: bisque;}

        .obj1 { border: 4px solid red; border-color: black;}
        .obj2 {background-color: bisque;}
    </style>
    
</head>
<body>

    <div id="root">
        <h1 :class = myh1>css</h1>
        <br>
        <button @click="changeColor">点我改变颜色</button>
        <br>
        <h1 :class = myh2>css2</h1>
        <br>
        <button @click="addStyle">点我添加样式</button>
        <br>
        <h1 :class = myh3>css3</h1>
        <br>
        <button @click="changeStyle">点我添加样式</button>
    </div>
    

    <script type='text/javascript'>
        
        new Vue({ 
            el: '#root',
            data: {
                key:"value",
                myh1:"myh1",
                myh2:null,
                myh3:{
                    obj1:false,
                    obj2:true
                }
            },
            methods: {
                changeColor(){
                    this.myh1 = "myh2"
                },
                addStyle(){
                    this.myh2= ["arr1","arr2","arr3"]
                },
                changeStyle(){
                    this.myh3.obj1 = true
                }
            },

        })
    </script>
    
</body>
</html>